<template>
  <div class="addPet">
    <el-form :model="userinfo" label-position="top" size="large">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input v-model="userinfo.username" placeholder="用户名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改用户密码">
            <el-input v-model="userinfo.password" placeholder="用户密码" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户类型">
            <el-select
              v-model="userinfo.usertype"
              class="m-2"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in [
                  { value: 'admin', label: '管理员' },
                  { value: 'user', label: '普通用户' },
                  { value: 'vip', label: '认证用户' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户状态">
            <el-select
              v-model="userinfo.userstate"
              class="m-2"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in [
                  { value: 'Active', label: '正常' },
                  { value: 'Suspended', label: '异常' },
                  { value: 'Locked', label: '封禁' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{
              filterPet ? '修改' : '添加'
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps } from 'vue'
import { SetUserInfo } from '@/utils/Lxz-axios'

import { ElNotification } from 'element-plus'

const { filterPet } = defineProps(['filterPet'])
const emit = defineEmits(['handleDraewr'])
// 表单数据
// 名称、品种、年龄、性格、健康情况、领养地址、发布时间、联系
// name,Variety, age, personality, health, address, time, contact
let userinfo = ref({
  username: '',
  password: '',
  usertype: '',
  userstate: '',
})

userinfo.value = { ...filterPet }

userinfo.value.password = ''

// 提交数据
const onSubmit = () => {
  userinfo.value = {
    ...userinfo.value,
    userstate: userinfo.value.userstate.toString(),
    usertype: userinfo.value.usertype.toString(),
  }
  SetUserInfo(userinfo.value).then((res) => {
    if (res.data.updatecode == 1) {
      ElNotification({
        title: '修改用户信息操作',
        message: '修改成功！',
        type: 'success',
      })
      console.log('修改完成', res.data)
      emit('handleDraewr')
    } else {
      ElNotification({
        title: '修改用户信息操作',
        message: res.data.error,
        type: 'error',
      })
    }
  })
}
</script>


<style lang="less" scoped>
.addPet {
  box-shadow: 0 0 0 0 #000;
  border-radius: 20rem;
  background-color: #fff;
  padding: 0;

  input {
    height: 60rem;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220rem;
}

.demo-form-inline .el-select {
  --el-select-width: 220rem;
}
</style>